<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<link type="text/css" href="lib/layui/css/layui.css" rel="stylesheet"/>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
$(function(){
	searBtn();
})
var tableObj;
var addIndex;
var updIndex;
function searBtn(){
	layui.use('table', function(){
		  var table = layui.table;
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 312
		    ,url: 'goodsCategory/queryGoodsCategoryAll.do' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'category_id', title: '类型ID', width:100, align:'center'}
		      ,{field: 'category_name', title: '类型名称', width:100, align:'center'}
		      ,{field: 'parent_id', title: '父类ID', width:100, align:'center'}
		      ,{field: 'category_state', title: '类型状态', width:100, align:'center'}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150, align:'center'}
		    ]]
		  });
		  //监听行工具事件
		  table.on('tool(test)', function(obj){
		    var data = obj.data;
		    //console.log(obj)
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	  $.post("goodsCategory/delGoodsCategory.do",{
			        	delId:delId
			        },function(res){
			        	 if(res=="true"){
							 layer.msg("删除成功");
							 tableObj.reload();
						  }else{
							  layer.msg("删除失败");
							  tableObj.reload();
						  }
			        })
		      });
		    } else if(obj.event === 'edit'){
		    	form.val("fm",data);
		    	updIndex=layer.open({
					  type:1
					  ,content:$("#updWin")
					  ,area:['400px','500px']
				  })
		    }
		  });
		});
}
function addBtn(){
	layui.use('layer', function(){
		  var layer = layui.layer;
		  addIndex=layer.open({
			  type:1
			  ,content:$("#addWin")
			  ,area:['400px','500px']
		  })
		});              
}
function addSaveBtn(){
	var addName = $("#addName").val();
	var addState = $("#addState").val();
	layer.confirm('确定添加吗?', function(index){
	        $.post('goodsCategory/addGoodsCategory.do',{
	        	addName:addName
	        	,addState:addState
	        },function(res){
	        	if(res=="true"){
	        		layer.close(addIndex);
	        		tableObj.reload();
	        		layer.msg("添加成功");
	        	}else{
	        		layer.close(addIndex);
	        		tableObj.reload();
	        		layer.msg("添加失败");
	        	}
	        })
	   });          
}
function updSaveBtn(){
	var updId = $("#updId").val();
	var updName = $("#updName").val();
	var updState = $("#updState").val();
	layer.confirm('确定修改吗?', function(index){
	        $.post('goodsCategory/editGoodsCategory.do',{
	        	updId:updId
	        	,updName:updName
	        	,updState:updState
	        },function(res){
	        	if(res=="true"){
	        		layer.close(updIndex);
	        		tableObj.reload();
	        		layer.msg("修改成功");
	        	}else{
	        		layer.close(updIndex);
	        		tableObj.reload();
	        		layer.msg("修改失败");
	        	}
	        })
	   });          
}
</script>
<body>
	<div id="addWin" style="display:none">	 
	<form class="layui-form" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品类型名称:</label>
	    <div class="layui-input-inline">
	      <input type="text" name="title" id="addName" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品类型状态:</label>
	    <div class="layui-input-inline">
	      <input type="text" name="title" id="addState" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
		<div class="layui-input-inline">
		   <button type="button" class="layui-btn" onclick="addSaveBtn()" lay-submit="" lay-filter="demo1">立即提交</button>
		   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	  </div>    
	</form>  
</div>
<!--  -->
<div id="updWin" style="display:none">	 
	<form class="layui-form" action="" lay-filter="fm" id="fm">
	<input type="hidden" name="category_id" id="updId" />
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品类型名称:</label>
	    <div class="layui-input-inline">
	      <input type="text" name="category_name" id="updName" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品类型状态:</label>
	    <div class="layui-input-inline">
	      <input type="text" name="category_state" id="updState" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
		 <div class="layui-input-inline">
		   <button type="button" class="layui-btn" onclick="updSaveBtn()" lay-submit="" lay-filter="demo1">立即提交</button>
		   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		 </div>
	  </div>    
	</form>  
</div>
<div style="margin-top:10px">
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">商品类型名称:</label>
    <div class="layui-input-inline">
      <input type="text" name="title" id="searName" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
     <div class="layui-input-inline">
      <input type="button" class="layui-btn" value="查询" onclick="searBtn()">
      <input type="button" class="layui-btn" value="添加" onclick="addBtn()">
    </div>
  </div>
</form>
</div>  
	<table id="demo" lay-filter="test"></table>
</body>
</html>